<template>
  <div>
    <div class="container">
      <div class="menu">
        <img :src="$store.state.userImg" alt="菜单" @click="changeHideList">
      </div>

      <div class="random-music-container">
        <ul>
          <li v-for="item in 200" :key="item + '随机'">
            随机{{item}}
          </li>
        </ul>
      </div>

      <div class="list-container" :class="{'hide-list': isShowList}">
        <!--分类名称-->
        <div class="change-list">
          <div v-for="type in listType" :key="type.listID + type.listName" @click="changeShowList(type.listID)">
            {{type.listName}}
          </div>
        </div>
        <!--分类内容-->
        <div class="list-item-container">
          <!--占位-->
          <div class="placeholder">占位</div>
          <ul class="list-item" v-for="type in listType" :key="type.listID" v-show="isListShow(type.listID)">
            <li class="item" v-for="item in 50" :key="item + type.listID">
              {{type.listName}}{{item}}
            </li>
          </ul>
        </div>
      </div>

      <div class="music-container">
        <img :src="$store.state.userImg" alt="音乐封面">
        <div class="title">歌曲名称</div>
        <div class="progress-container">
          <div class="time">now</div>
          <div class="progress">
            <div class="all">
              <div class="now"></div>
            </div>
          </div>
          <div class="time">all</div>
        </div>
        <div class="control-button">
          <div class="previous">前</div>
          <div class="pause" v-if="isPaused" @click="continueMusic">继续</div>
          <div class="pause" v-else @click="pauseMusic">暂停</div>
          <div class="next">后</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "myMusic",
    data() {
      return {
        //列表显示类型
        listShow: 'commonList',
        isShowList: true,
        isPaused: true,

        //列表类型
        listType: [
          {
            listName: '大众',
            listID: 'commonList'
          },
          {
            listName: '小众',
            listID: 'nicheList'
          }
        ]
      }
    },
    computed: {

    },
    methods: {
      //判断该类型是否显示
      isListShow(value) {
        if(this.listShow === value){
          return true
        }
        else {
          return false
        }
      },
      changeShowList(value) {
        this.listShow = value
      },
      changeHideList() {
        this.isShowList = !this.isShowList
      },
      pauseMusic() {
        this.isPaused = true
      },
      continueMusic() {
        this.isPaused = false
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~@/styles/views/defaultValue.less";
  @import "~@/styles/views/styleAndAnimation.less";
  @placeholderPadding: 20px;
  .container {
    position: relative;
    width: @containerWidth;
    min-width: @phoneMin;
    height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    background-color: @areaBackground;

    .menu {
      position: fixed;
      top: 5px;
      right: 5px;
      z-index: @zIndexTop;
      background: @areaBackground;
      border-radius: @borderRadius;

      img {
        margin: 20px;
      }
    }

    .random-music-container {
      height: 100%;
      overflow: auto;
      .hideScroll();

      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        min-height: 100%;

        li {
          margin: 10px 20px;
          padding: 10px;
          font-size: small;
          border-radius: @borderRadius;
          background-color: @itemBackgroundColor;
          text-align: center;
        }
      }
    }

    .music-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50vh;
      left: 50%;
      transform: translate(-50%,-50%);
      box-sizing: border-box;
      width: 80%;
      max-width: 500px;
      min-width: @phoneMin - 20;
      padding: 20px;
      border-radius: @borderRadius * 2;
      background-color: pink;
      text-align: center;

      img {
        box-sizing: border-box;
        margin: 10px;
        width: 50%;
        border-radius: 50%;
        animation: rotateImg linear 10s infinite;
      }

      .title {
        margin: 20px;
        font-size: x-large;
      }

      .progress-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 20px;
        font-size: small;

        .time {
          flex: 10%;
          font-size: small;
        }

        .progress {
          position: relative;
          height: 8px;
          flex: 80%;
          margin: 0 auto;

          .all {
            position: absolute;
            z-index: @zIndexBottom;
            top: 0;
            left: 5%;
            width: 90%;
            height: 8px;
            overflow: hidden;
            border-radius: 4px;
            background-color: yellow;

            &:hover .now {
              width: 80%;
            }

            .now {
              position: absolute;
              z-index: @zIndexBottomCenter;
              width: 5%;
              height: 100%;
              background-color: green;
              transition: width 2s;
            }
          }
        }
      }

      .control-button {
        display: flex;
        justify-content: space-around;
        width: 100%;
        margin: 20px;

        & :nth-child(n) {
          padding: 10px;
          border: 1px solid skyblue;
          border-radius: @borderRadius;
        }
      }
    }

    .hide-list {
      transform: translateX(-110%);
    }

    .list-container {
      position: absolute;
      top: 0;
      left: 0;
      z-index: @zIndexBottomCenter;
      height: 100vh;
      width: 25%;
      min-width: 250px;
      overflow: auto;
      background-color: pink;
      transition: all 1s;

      /*改此项的时候记得改下面的占位*/
      .change-list {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: @placeholderPadding;
        box-sizing: border-box;
        background: coral;
        text-align: center;
        & :nth-child(n) {
          flex: 1;
        }
      }

      .list-item-container {
        width: 100%;
        height: 100%;
        overflow: auto;
        .hideScroll();
        .placeholder {
          padding: @placeholderPadding + 2;
          box-sizing: border-box;
          width: 100%;
          text-align: center;
          color: transparent;
        }

        .list-item {
          .item {
            margin: 2px 4px ;
            padding: 10px;
            border: black 1px solid;
            border-radius: @borderRadius;
          }
        }
      }
    }
  }

  /*手机*/
  @media screen and (min-width: @phoneMin) and (max-width: @phoneAndIPad) {
    .container {
      .music-container {
        img {
          width: 90%;
        }
      }
    }
  }
</style>